<template>
  <div class="gui-padding" style="height: 100%;overflow: auto">
    <a-row :gutter="16">
      <a-col :span="6">
        <a-card title="总销售额" :bordered="false">
          <span class="flex fz30 fb">￥ <animated-number
              from="0"
              :to="126560"
              :key="1">
          </animated-number></span>
          <div class="flex mt15">
            <span class="mr10 flex align-items">周同比12%<span class="red ml5"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span></span>
            <span class="mr10 flex align-items">日同比11%<span class="green ml5"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="访问量" :bordered="false">
          <span class="flex fz30 fb"><animated-number
              from="0"
              :to="8848"
              :key="1">
          </animated-number></span>
          <div class="flex mt15">
            <span class="mr10 flex align-items">周同比12%<span class="red ml5"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span></span>
            <span class="mr10 flex align-items">日同比11%<span class="green ml5"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="支付笔数" :bordered="false">
          <span class="flex fz30 fb"><animated-number
              from="0"
              :to="6560"
              :key="1">
          </animated-number></span>
          <div class="flex mt15">
            <span class="mr10 flex align-items">周同比12%<span class="red ml5"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span></span>
            <span class="mr10 flex align-items">日同比11%<span class="green ml5"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="运营活动效果" :bordered="false">
          <span class="flex fz30 fb"><animated-number
              from="0"
              :to="78"
              :key="1">
          </animated-number>%</span>
          <div class="flex mt15">
            <span class="mr10 flex align-items">周同比12%<span class="red ml5"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span></span>
            <span class="mr10 flex align-items">日同比11%<span class="green ml5"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="0" class="mt20">
      <a-col :span="24">
        <dashboard-chart3></dashboard-chart3>
      </a-col>
    </a-row>
    <div class="mt20">
      <a-row :gutter="16">
        <a-col :span="14">
          <a-card title="销售额类别占比" :bordered="false">
            <dashboard-chart2></dashboard-chart2>
          </a-card>
          <a-card title="线上热门搜索" :bordered="false"  class="mt20">
            <dashboard-table></dashboard-table>
          </a-card>
        </a-col>
        <a-col :span="10">
          <a-card title="销售额类别占比" :bordered="false">
            <dashboard-chart></dashboard-chart>
          </a-card>
          <a-card title="新注册用户" :bordered="false" class="mt20">
            <dashboard-reg></dashboard-reg>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script setup>

</script>
<style scoped></style>